<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        a {
            text-decoration: none;
            width: 100%;

        }

        ul {
            height: 100%;
            margin-left: 10px;
            margin-right: 10px;
            list-style-type: none;
            padding-inline-start: 0;
            column-count: 2;
            column-gap: 10px;

        }

        li {
            margin-bottom: 10px;
            position: relative;
        }

        .item_img {
            width: 100%;
            vertical-align: middle;
            object-fit: contain
        }

        .item_icon_play {
            box-sizing: border-box;
            width:20px;
            height: 20px;
            padding: 5px;
            object-fit: contain;
            position: absolute;
            top:10px;
            right: 10px;
            background-color: rgba(200, 200, 200, 0.3);
            border-radius: 20px;
        }

        .item_text {
            padding-left: 10px;
            padding-right: 10px;
            flex-grow: 1;
        }

        span {
            width: 200px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 这里是超出几行省略 */
            overflow: hidden;

        }
    </style>
</head>
<!-- TODO 兼容pc端设置多列展示 -->

<body>
    <ul id="files"></ul>
    <script type="text/javascript" src="./utils.js"></script>
    <script type="text/javascript" src="./getrequest.js"></script>
    <script type="text/javascript">
        function getQueryString(name) {
            const url_string = window.location.href;//"/getOtherFiles"//"https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
            const url = new URL(url_string);
            return url.searchParams.get(name);
        }
        // var pathParam = getQueryString("path")

        var pathParam = "videos"


        // parseResult(["https://divaid.github.io/resources/books/nashannarennagou.txt","https://divaid.github.io/resources/books/guaimomotou.pdf", "https://divaid.github.io/resources/json/books.json"])

        const proto = location.origin.indexOf("https") == 0 ? "https://" : "http://"


        var fileList = []
        var imageParent = document.getElementById("files")


        function getLinkAndImg(name, path) {
            if (name.indexOf(".") > 0) {//是文件
                let img = proto + location.host + '/files/ic_file.png'
                let errorImg = img
                let link = path
                // if (name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg") || name.endsWith(".webp") || name.endsWith(".svg")) {
                //     img = path
                // } else if (name.endsWith(".mp4") || name.endsWith(".avi") || name.endsWith(".mkv") || name.endsWith(".mov") || name.endsWith(".3gp")) {
                    errorImg = proto + location.host + '/files/ic_video.png'
                    img = proto + location.host + '/files/videos/thumbnails/' + name.substring(0, name.length - 4) + ".jpg"
                // } else if (name.endsWith(".mp3") || name.endsWith(".flac") || name.endsWith(".wav") || name.endsWith(".ape") || name.endsWith(".aac")) {
                //     img = proto + location.host + '/uploadDir/ic_music.png'
                // } else if (name.endsWith(".text") || name.endsWith(".pdf") || name.endsWith(".doc") || name.endsWith(".docx") || name.endsWith(".excel")) {
                //     img = proto + location.host + '/uploadDir/ic_doc.png'
                //     if (!pc && name.toLowerCase().lastIndexOf(".pdf") > 0) {
                //         link = proto + location.host + "/uploadDir/pdfreader/web/viewer.html?url=" + json[i]//TODO 手机端使用
                //     }
                // }
                return { 'link': link, 'img': img, "errorImg": errorImg }
            } else {//是文件夹
                return { 'link': proto + location.host + "/files/viewFiles.html?path=" + pathParam + "/" + name, 'img': proto + location.host + '/files/ic_dir.png' }
            }
        }

        function parseResult(result) {
            let json;
            if (typeof result === 'string') {
                json = JSON.parse(result);
            } else {
                json = result;
            }
            // const json = JSON.parse(result);
            fileList = json;
            fileList.sort(function (a, b) {
                return a.localeCompare(b, undefined, { sensitivity: 'base' });
            });



            let string = "";
            for (let i = 0; i < json.length; ++i) {
                let name = json[i].substring(json[i].lastIndexOf("/") + 1)
                let linkAndImg = getLinkAndImg(name, json[i])

                string += "<a  href=" + linkAndImg.link + "><li class=\"a_link\">"

                string += "<img loading=\"lazy\" class='item_img' src='" + linkAndImg.img + "' onerror=\"this.src='" + linkAndImg.errorImg + "'; this.onerror=null;\"/>"

                string += "<img class=\"item_icon_play\" src=\""+proto + location.host +"/files/ic_video_play_white.png\"/>"
                string += "</li></a>"
                // string += "<a href="+json[i]+" target=\"_blan\"><img style=\"width:100px;margin:10px;display:block\" src=\""+json[i] ;
                // string += "\"><text></text></a>";
            }
            imageParent.innerHTML = string;
        }


        getRequest(proto + location.host + "/getFiles", "path=" + pathParam, function (res) {//"getOtherFiles"
            // console.log(res)
            // console.log(JSON.parse(res))
            parseResult(res)
        })
    </script>
</body>

</html>